<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <script src="preview/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <script src="preview/js/radialIndicator.js"></script>
    <script src="preview/js/jquery.zySlide.js"></script>
    <title>大数据单模块-今日推荐</title>
    <style>
        .notice-content{
            position: relative;
            width: 100%;
            height: 2.08rem;
            background: url(preview/img/notice_text.png);
            background-size: 100% 100%;
            padding: .27rem .22rem .22rem;
            /*background-image: linear-gradient(0deg, rgba(13, 26, 57, 0.7) 0%, rgba(27, 47, 91, 0.7) 36%, rgba(41, 67, 125, 0.7) 84%);*/
            /*box-shadow: 0rem 0.03rem 0.07rem 0rem rgba(0, 0, 0, 0.38);*/
            /*border: solid 0.01rem rgba(72, 77, 91, 0.28);*/
        }
        /*由于通知标题的背景图片上下左右尺寸不对应所以设置的样式都不对称*/
        .notice_title{
            position: absolute;
            color:#b2c4e1;
            width: 1.96rem;
            height: 0.26rem;
            line-height: 0.26rem;
            text-align: center;
            background: url(preview/img/notice_title.png);
            background-size: 100% 100%;
            top:-0.15rem;
            left:52%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
            padding:0 0.16rem 0 0.22rem;
        }
        /*设置文字外面的盒子制造出四面间距的效果*/
        .notice_text{width: 100%;height: 100%;position: relative;overflow: hidden;}
        .notice_text>div{position: absolute;}
        .notice_text p{text-indent:0.36rem;text-align: justify;}
        .notice{cursor: pointer}


    </style>
</head>
<body>
    <div class="notice">
        <div class="module-title ycenterbox"><img src="preview/img/listimg.png" /><span class="section_name" data-key="today_recom_str">通知</span></div>
        <div class="notice-content">
            <div class="notice_title words1"></div>
            <div class="notice_text"></div>
        </div>
    </div>
</body>
<script>
    var notice_move_flag=false,txt_index=0,div_height,div_parent,scrollTime=10000,arr_con=[],arr_title=[],notice_time=null;
    function notice_move(){
        clearTimeout(notice_time);////每次清空定时器
        //console.log('已经清除了上一个定时器' + notice_time);
        $('.notice_text').stop().css({top:0});
        $(".notice_text").html(arr_con[txt_index]);
        $('.notice_title').html(arr_title[txt_index]);//赋值当前通知的标题
        $(".notice_text>div>p:eq(2)").remove();
        div_height=$('.notice_text>div').height();///当前显示通知的盒子的高度
        div_parent=$('.notice_text').height();////父盒子高度
        if(div_height>div_parent){
            scrollTime=div_height/10*1000;
            $('.notice_text>div').animate({top:-div_height},scrollTime,"linear");
        }
        txt_index++;
        if(txt_index==arr_con.length){
            txt_index=0;
        }
        notice_time=setTimeout(notice_move,scrollTime);
        //console.log('新的定时器是'+txt_index+'=============='+notice_time);
    }
    window.onresize = function(){
        pageRem(100,462);
    };
    window.onload = function(){
        pageRem(100,462);
        var gobalAddr="whfw.superlib.com:9025";
        notice();
        var websocket_notice,fwebsocket_notice = false;//避免重复连接 cxts/websocket/notice
        function notice(){
            try{
                websocket_notice=new WebSocket('wss://'+gobalAddr+'/cxts/websocket/notice');//参数是服务器地址，还有一个参数是自协议可以不写
                websocket_notice.onopen=function(res){
                    console.log('-----通知连接成功-----');
                };
                websocket_notice.onmessage=function(msg){
                    var json = JSON.parse(msg.data);
                    var new_notice_con=[];
                    var new_notice_str=" ";
                    $.each(json.data,function(i,e){
                        //arr_title.push(e.fTitle);///将所有的标题存到数组中
                        if(isNull(e.fContent)!=0){
                            new_notice_str='<div>'+e.fContent+'</div>';
                            new_notice_con.push(new_notice_str);///将每次推送获得的通知内容放到数组中
                        }
                    });
                    /////新数组中的数据和以前旧数组中的数组做对比
                    if(JSON.stringify(new_notice_con) === JSON.stringify(arr_con)){
                        notice_move_flag=false;
                        return;
                    }
                    console.log('更新数据？通知内容数据库更新了' + new Date());
                    notice_move_flag=true;
                    txt_index=0;///每次推数据时候让索引从0开始
                    var str="";///拼接字符串
                    arr_con=[];///每次清空数组
                    $(".notice_inner").html(" ");///每次进来将通知内容节点都清空
                    //console.log(json.data);
                    arr_title=[];
                    $.each(json.data,function(i,e){
                        ///每个e就是一个对象
                        arr_title.push(e.fTitle);///将所有的标题存到数组中
                        str='<div>'+e.fContent+'</div>';
                        arr_con.push(str);///将通知内容放到数组中
                    });
                    if(notice_move_flag){
                        notice_move();
                    }
                };
            } catch (e) {
                console.log(e);
            }
        }
    }

</script>
</html>